<template>
  <div>
    <!--header-->
    <headers></headers>
    <!--header end-->

    <!--banner-->
    <div class="top-banner about-banner">
      <div class="banner-inner">
        <h1>小步创想</h1>
        <p>中国智慧城管及大数据专业服务商</p>
      </div>
    </div>
    <!--banner end-->

    <!--con-->
    <div class="about_con">
      <!--公司简介-->
      <div class="about_comp" id="0">
        <div class="about_comp_con">
          <div class="about_comp_img">
            <img src="images/about/about_com.png" alt="" width="100%" />
          </div>
          <div class="about_comp_text">
            <div class="section-title" id="0"><h1>公司概况</h1></div>
            <p>
              成都小步创想科技有限公司（简称：小步创想）专注于中国智慧城管领域，拥有成都（软件）和深圳（硬件）两大研发中心，及华东、华中、华南、西南四大区域办事处，是一家集解决方案服务咨询、软硬件产品研发、产品销售服务于一体的高新技术企业。
            </p>
            <p>
              小步创想紧抓智慧城市建设、数字城管向智慧城管升级、行政执法体制改革、环卫一体化精细化等政策趋势，结合大数据、可视化、物联网、人工智能等先进技术，自主研发设计城市治理大数据、城市综合指挥中心、网格化监督指挥平台、人工智能视频监督、智慧环卫一体化、智慧执法一体化等三十余种产品及解决方案，全面提升城市治理科学化、精细化、智能化水平！
            </p>
          </div>
        </div>
      </div>

      <!--发展历程-->

      <div class="about_develop" id="1">
        <div class="panel-title">
          <div class="panel-title-first">
            <span class="title-line"></span>
            <h1>发展历史</h1>
            <span class="title-line"></span>
          </div>
        </div>
        <div class="develop-item">
          <div class="develop-text">
            <h4>2011年成立</h4>
            <p>
              2011年小步创想成立，总部位于成都国家级高新技术产业园 ——
              西部智谷，拥有政、企两大事业部，各类人才400余人。
            </p>
          </div>
          <div class="develop-year">2011<span class="develop-line"></span></div>
          <div class="develop-img"><img src="images/about/6_2011.png" /></div>
        </div>
        <div class="develop-item">
          <div class="develop-img"><img src="images/about/6_2012.png" /></div>
          <div class="develop-year">2012<span class="develop-line"></span></div>
          <div class="develop-text rt">
            <h4>2012年CCTV战略合作伙伴</h4>
            <p>
              2012年，小步凭优秀的产品研发实力，成为CCTV战略合作伙伴，为央视新媒体战略打造【CCTV微视】产品，并荣获2015年度广播影视科技创新一等奖。
            </p>
          </div>
        </div>
        <div class="develop-item">
          <div class="develop-text">
            <h4>2013年创新的智慧城管解决方案</h4>
            <p>
              2013年，小步先后发布创新的智慧执法和智慧环卫两大产品线。至今产品已完成了30余个重大版本升级，客户覆盖全国。
            </p>
          </div>
          <div class="develop-year">2013<span class="develop-line"></span></div>
          <div class="develop-img"><img src="images/about/6_2013.png" /></div>
        </div>
        <div class="develop-item">
          <div class="develop-img"><img src="images/about/6_2014.png" /></div>
          <div class="develop-year">2014<span class="develop-line"></span></div>
          <div class="develop-text rt">
            <h4>2014年完成全国布局</h4>
            <p>
              2014年，小步开始组建覆盖全国的销售网络，在核心省会城市成立十多家办事处，负责区域市场的售前售后支持及销售工作，将创新产品推向全国。
            </p>
          </div>
        </div>
        <div class="develop-item">
          <div class="develop-text">
            <h4>2015年发布创新的专业终端</h4>
            <p>
              2015年，成立深圳硬件研发中心，为改变行业硬件适配度低，易用性差的现状，着手研发更先进的城市管理终端，结合小步软件，打造优异的“软硬一体”体验。自研发的X1全能执法终端更是引领执法终端的创新潮流。
            </p>
          </div>
          <div class="develop-year">2015<span class="develop-line"></span></div>
          <div class="develop-img"><img src="images/about/6_2015.png" /></div>
        </div>
        <div class="develop-item">
          <div class="develop-img">
            <img src="images/about/6_2017(1).png" />
          </div>
          <div class="develop-year">2017<span class="develop-line"></span></div>
          <div class="develop-text rt">
            <h4>2017年发布大数据产品</h4>
            <p>
              2017年，小步开始深入大数据研发领域，并发布城市管理大数据产品。结合小步多年的城市管理领域经验和一线城市管理需求，打造创新、实用的城市管理大数据产品。
            </p>
          </div>
        </div>
        <div class="develop-item">
          <div class="develop-text">
            <h4>2017年发布执法全流程一站式管理云平台</h4>
            <p>
              2017年，小步智慧执法再次强势升级，结合先进的音视频通讯技术，大数据及人工智能，以执法体制改革和综合执法为大需求背景，发布针对执法前、中、后全流程的一站式管理平台，全面提升执法效能。
            </p>
          </div>
          <div class="develop-year">2017<span class="develop-line"></span></div>
          <div class="develop-img">
            <img src="images/about/6_2017(2).png" />
          </div>
        </div>
        <div class="develop-item">
          <div class="develop-img"><img src="images/about/6_2018.png" /></div>
          <div class="develop-year">2018<span class="develop-line"></span></div>
          <div class="develop-text rt">
            <h4>2018年建立城市管理大数据研究基地</h4>
            <p>
              2018年，小步创想与江苏省城市管理局、苏州市政市容管理局、苏州太湖新城管委会、中国城市科学研究会、中科院物联网研究发展中心等五家政府及科研单位共建的城市综合管理大数据研究基地在苏州太湖新城成立。
            </p>
          </div>
        </div>
        <div class="develop-item">
          <div class="develop-text">
            <h4>2018年加入中国移动云SaaS生态联盟</h4>
            <p>
              2018年，小步创想成为移动云SaaS生态联盟成员，与中国移动建立了更深度的战略合作关系。
            </p>
          </div>
          <div class="develop-year">2018<span class="develop-line"></span></div>
          <div class="develop-img"><img src="images/about/2018_1.png" /></div>
        </div>
        <div class="develop-item">
          <div class="develop-img"><img src="images/about/2019_1.png" /></div>
          <div class="develop-year">2019</div>
          <div class="develop-text rt">
            <h4>2019年入选 “创响中国”雏鹰计划种子企业</h4>
            <p>
              2019年，小步创想入选由国家发展改革委和中国科协主办的2019年“创响中国”暨菁蓉汇雏鹰计划种子期·雏鹰企业。
            </p>
          </div>
        </div>
      </div>
      <!--企业精神-->
      <div class="about_spirit" id="4">
        <div class="panel-title">
          <div class="panel-title-first">
            <span class="title-line"></span>
            <h1>小步兼程，志达千里的企业精神</h1>
            <span class="title-line"></span>
          </div>
        </div>
        <div class="about_spirit_con">
          <div class="about_spirit_left">
            <div class="about_spirit_line_left"></div>
            <div class="about_spirit_tit">经营理念</div>
            <div class="about_spirit_line_right"></div>
            <div class="about_spirit_pic">
              <img src="images/about/spirit1.png" alt="" />
            </div>
            <h3>专业呈现价值，价值汇聚品牌</h3>
            <p>
              用专业产品为中国城市管理者不断提供价值，是小步孜孜不倦的追求。
            </p>
          </div>
          <div class="about_spirit_center">
            <div class="about_spirit_line_left"></div>
            <div class="about_spirit_tit">企业精神</div>
            <div class="about_spirit_line_right"></div>
            <div class="about_spirit_pic">
              <img src="images/about/spirit2.png" alt="" />
            </div>
            <h3>小步兼程，志达千里</h3>
            <p>
              小步创想将古训“不积跬步，无以至千里”作为企业精神，以一点一滴行动，一步一脚印前行，笃定发展。
            </p>
          </div>
          <div class="about_spirit_right">
            <div class="about_spirit_line_left"></div>
            <div class="about_spirit_tit">产品理念</div>
            <div class="about_spirit_line_right"></div>
            <div class="about_spirit_pic">
              <img src="images/about/spirit3.png" alt="" />
            </div>
            <h3>趋势，创新，务实</h3>
            <p>
              以“为城市管理提供符合趋势，不断创新，实用落地的产品”为坚定目标。
            </p>
          </div>
        </div>
      </div>
    </div>
    <!--con end-->

    <div class="float-box">
      <div class="qq-advice">
        <a
          class="qq-advice-inner"
          href="http://wpa.qq.com/msgrd?v=3&uin=2366320826&site=qq&menu=yes"
          target="_blank"
        >
          <img src="images/public/advice_icon.png" />
          <span>在线咨询</span>
        </a>
        <div class="tel-advice">
          <div class="tel-icon"><img src="images/public/phone.png" /></div>
          <div class="tel-box">
            <img src="images/public/phone2.png" />
            <div class="tel-box-r">
              <p>咨询热线</p>
              <span>400-864-9582</span>
            </div>
          </div>
        </div>
      </div>

      <a class="back-top"></a>
    </div>

    <!--footer-->
    <footers></footers>
    <!--footer end-->
  </div>
</template>
<script>
import $ from "jquery";
import headers from "../component/headers";
import footers from "../component/footers";
export default {
  name: "about",
  data() {
    return {};
  },
  components: {
    headers,
    footers,
  },
  methods: {
    bdshare() {
      $(function() {
        var share_target_url;
        var share_target_sharetitle;
        var share_target_shareabstract;

        $(".bdsharebuttonbox>a").mouseover(function() {
          var Tthis = $(this);
          var url = window.location.href;
          var oneurl;

          if ($(this).hasClass("popVideo")) {
            var url = "http://zf.xbcx.com.cn/shareVideo.php";
          } else {
            var url = window.location.href;
          }

          oneurl = url;
          if (url.indexOf("#") > 0) {
            oneurl = url.substring(0, url.indexOf("#"));
          }
          if (oneurl.indexOf("?") > 0) {
            share_target_url =
              oneurl +
              "&" +
              Tthis.data("suffixe") +
              "&video_id=" +
              Tthis.data("sharevideo");
          } else {
            share_target_url =
              oneurl +
              "?" +
              Tthis.data("suffixe") +
              "&video_id=" +
              Tthis.data("sharevideo");
          }
          share_target_sharetitle = Tthis.data("sharetitle");
          share_target_shareabstract = Tthis.data("shareabstract");
        });

        window._bd_share_config = {
          common: {
            onBeforeClick: function(cmd, config) {
              if (!share_target_url) {
                share_target_url = window.location.href;
              }
              config.bdUrl = share_target_url;
              config.bdText = share_target_sharetitle;
              config.bdDesc = share_target_shareabstract;
              return config;
            },
          },

          share: [
            {
              tag: "share_1",
              bdSize: 24,
            },
            {
              tag: "share_2",
              bdSize: 32,
            },
          ],
        };
      });
    },
    common() {
      //导航下拉菜单
      $(".header-nav-menu")
        .mouseenter(function() {
          var hasChild = $(this).find(".header-subnav").length;
          if (hasChild > 0) {
            $(this)
              .find(".header-subnav")
              .stop()
              .slideDown("fast");
          }
        })
        .mouseleave(function() {
          $(this)
            .find(".header-subnav")
            .stop()
            .slideUp("fast");
        });

      $(window).scroll(function() {
        if ($(window).scrollTop() > 0) {
          $(".header").addClass("scroll");
        } else {
          $(".header").removeClass("scroll");
        }
      });

      var scrollFun = function() {
        var width = ($(".scroll-container").width() - 60) / 4;
        $(".scroll-item").width(width);
        var img_len = $(".scroll-item").length;
        var img_wd = width;

        var num = 0;
        if (img_len < 5) {
          $(".scroll-next,.scroll-prev").hide();
          $(".scroll-container ul").css({
            width: "100%",
            "text-align": "center",
          });
        }
        if ($(".scroll-container ul li").length > 4) {
          $(".scroll-container ul").append($(".scroll-container ul").html());
        }

        $(".scroll-next").click(function() {
          if (num == img_len) {
            num = 0;
            $(".scroll-container ul").css("left", 0);
          }
          num++;
          move(-num);
        });

        $(".scroll-prev").click(function() {
          if (num == 0) {
            num = img_len;
            $(".scroll-container ul").css("left", -num * (img_wd + 13) + "px");
          }
          num--;
          move(-num);
        });

        function move(num) {
          $(".scroll-container ul")
            .stop()
            .animate({
              left: num * (img_wd + 13) + "px",
            });
        }
      };
      // scrollFun();
      autoRound(".honor-cell", ".honor-img-big div");
      autoRound(".about_team_peo", ".about_team_text");
      function autoRound(item, detail) {
        var $item = $(item);
        var $detail = $(detail);

        var i = 0;
        var length = $item.length;
        var t = setInterval(function() {
          i++;
          if (i == length) {
            i = 0;
          }
          $item
            .eq(i)
            .addClass("cur")
            .siblings()
            .removeClass("cur");
          $detail
            .eq(i)
            .addClass("show")
            .siblings()
            .removeClass("show");
        }, 4000);

        $item.mouseenter(function() {
          clearInterval(t);
          var i = $(this).index();
          $(this)
            .addClass("cur")
            .siblings()
            .removeClass("cur");
          $detail
            .eq(i)
            .addClass("show")
            .siblings()
            .removeClass("show");
        });

        $item.mouseleave(function() {
          var i = $(this).index();
          t = setInterval(function() {
            i++;
            if (i == length) {
              i = 0;
            }
            $item
              .eq(i)
              .addClass("cur")
              .siblings()
              .removeClass("cur");
            $detail
              .eq(i)
              .addClass("show")
              .siblings()
              .removeClass("show");
          }, 4000);
        });
      }

      indexBanner();
      function indexBanner() {
        var n = 0;
        var t = n;
        var width = $(".banner-inner-tab .tab-item").width();
        var count = $(".banner-inner-item").length;
        $(".banner-inner-tab .tab-line img").width(width);

        $(".banner-inner-tab .tab-item").click(function() {
          var i = $(this).index();
          n = i;
          if (i >= count) {
            return;
          }

          $(".banner-inner-item")
            .eq(i)
            .addClass("show")
            .siblings()
            .removeClass("show");
          $(".tab-line img").css({
            transform: "translateX(" + width * i + "px)",
          });
        });

        t = setInterval(showAuto, 8000);

        $(".banner-inner-tab").hover(
          function() {
            clearInterval(t);
          },
          function() {
            t = setInterval(showAuto, 8000);
          }
        );

        function showAuto() {
          n = n >= count - 1 ? 0 : ++n;
          $(".banner-inner-tab .tab-item")
            .eq(n)
            .trigger("click");
        }
      }

      $(".back-top").on("click", function() {
        $("body,html").animate({ scrollTop: 0 }, 500);
        return true;
      });

      $(".product-shouqi").click(function() {
        var w = $(".product-posit").width();
        $(".product-posit").css("margin-left", -w);
        setTimeout(function() {
          $(".product-zhankai").show();
          $(this).hide();
        }, 400);
      });
      $(".product-zhankai").click(function() {
        $(".product-posit").css("margin-left", 0);
        $(".product-shouqi").show();
        $(this).hide();
      });
    },
    video_player() {
      var palyers = {};
      window.TPlayer = {
        play: function(eleID, fileId, auto_play, size) {
          if (!size) {
            size = {
              width: 614,
              height: 381,
            };
          }
          var option = {
            auto_play: auto_play,
            file_id: fileId,
            app_id: "1252000488",
            width: size.width,
            height: size.height,
          };
          /*调用播放器进行播放*/
          palyers[eleID] = new qcVideo.Player(
            /*代码中的id_video_container将会作为播放器放置的容器使用, 可自行替换*/
            eleID,
            option
          );
          return palyers[eleID];
        },
        pasue: function(eleID) {
          palyers[eleID].pause();
        },
        pasueAll: function() {
          $.each(palyers, function(i, n) {
            n.pause();
          });
        },
        change: function(eleID, fileId, auto_play, size) {
          if (!palyers[eleID]) {
            this.play(eleID, fileId, auto_play, size);
          }
          palyers[eleID].changeVideo({
            app_id: "1252000488",
            file_id: fileId,
            auto_play: auto_play,
          });
        },
        livePlay: function(eleID, url, size) {
          //http://ptest-meeket.xbwq.com.cn/meeket/viewer/live/viewer/index?a=d722031322a3224696f5d6f63622c22283131322a3224696f5566796c622b7
          if (!size) {
            size = {
              width: 614,
              height: 381,
            };
          }
          if ($("iframe_" + eleID).length) {
            return;
          }
          $("#" + eleID).html(
            '<iframe id="iframe_' +
              eleID +
              '" src="' +
              url +
              "&is_full_play=1&v_height=" +
              size.height +
              '"' +
              'height="' +
              size.height +
              '" width="' +
              size.width +
              '" frameborder="0"></iframe>'
          );
        },
        liveStop: function(eleID) {
          $("#" + eleID).html("");
        },
      };
    },
  },
  mounted() {
    this.bdshare();
    this.common();
    this.video_player();
  },
};
</script>
